<template>
	<view class="container">
		<view class="search-box">
			<my-search :radius="4" :align="'center'" border @click="gotoSearch"></my-search>
		</view>
		<view class="cate-container" :style="{ 'height': wh + 'px' }">
			<scroll-view scroll-y="true" class="category-list">
				<view :class="['left-scroll-view-item', index === active ? 'active' : '']" v-for="(item, index) in cateList" @click="activeChange(index)" :key="index">
				{{ item.name }}
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="category-child">
				<view class="cate-level" v-for="(item, index) in cateLevel2" :key="item.id">
					<view class="cate-level-title">
						——<text class="level-title">{{ item.name }}</text>——
					</view>
					<view class="cate-list">
						<block v-for="child in item.children" :key="child.id">
							<navigator class="cate-item" :url="`/subcontract/goods_list/goods_list?cateId=${child.id}&cateName=${child.name}`">
								<!-- <view> -->
									<image :src="`${url}${child.picture}`"></image>
									<text>{{ child.name }}</text>
								<!-- </view> -->
							</navigator>
						</block>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				wh: 0,
				active: 0,
				cateList: [],
				scrollTop: 0,
				cateLevel2: [],
				url: '',
			}
		},
		onLoad() {
			this.getCategories()
			this.url = this.$imageUrl
			// uni.request({
			// 	url: 'http://localhost:8080/api/categories',
			// 	success: (res) => {
			// 		console.log(res);
			// 	},
			// 	fail: (err) => {
			// 		console.log(err);
			// 	}
			// })
		},
		mounted() {
			uni.getSystemInfo({
				success: (resu) => {
					const query = uni.createSelectorQuery()
					query.select('.cate-container').boundingClientRect()
					console.log(query.select('.cate-container').boundingClientRect());
					query.exec(res => {
						console.log(res);
						this.wh = resu.windowHeight - res[0].top
						console.log(this.wh);
					})
				}
			})
		},
		methods: {
			activeChange(index) {
				this.active = index
				this.cateLevel2 = this.cateList[index].children ? this.cateList[index].children : []
				this.scrollTop = this.scrollTop === 0 ? 1 : 0
			},
			async getCategories() {
				const { data: res } = await uni.$http.get('/categories')
				console.log(res);
				if(res.code !== 200) return uni.$showMsg()
				this.cateList = res.data
				console.log(this.cateList);
				this.cateLevel2 = res.data[0].children
			},
			gotoSearch() {
				uni.navigateTo({
					url: '/subcontract/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
.container {
	width: 100%;
	height: 100%;
}
.search-box {
	width: 100%;
}
.cate-container {
	width: 100%;
	display: flex;
}
.category-list {
	width: 240rpx;
	height: 100%;
	background-color: #fff;
	.left-scroll-view-item {
		width: 100%;
		height: 60px;
		font-size: 13px;
		line-height: 60px;
		text-align: center;
		background-color: #f5f5f5;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		&.active {
			// color: aqua;
			font-size: 15px;
			font-weight: bold;
			position: relative;
			background-color: #fff;
			transition: all 0.5s ease;
			&::before {
				content: '';
				display: block;
				width: 4px;
				height: 40px;
				background-color: aqua;
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}
		}
	}
}
/deep/ scroll-view ::-webkit-scrollbar {
		display: none;
}
.category-child {
	height: 100%;
	background-color: #fff;
}
.cate-level-title {
	font-size: 12px;
	color: #dcdcdc;
	text-align: center;
	padding: 15px 0;
	// margin-bottom: 10px;
	.level-title {
		font-weight: bold;
		color: #000;
		margin: 0 10px;
	}
}

.cate-list {
	display: flex;
	flex-wrap: wrap;
	.cate-item {
		width: 33.33%;
		color: #000;
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
		margin-bottom: 10px;
		image {
			width: 60px;
			height: 60px;
		}
		text {
			margin-top: 10rpx;
			font-size: 12px;
		}
	}
}
</style>
